<template>
	<view class="">
		<view class="navba-box" >
			<!-- 状态栏高度 -->
			<view class="top"></view> 
			<view class="header-box">
				<view class="userinfo">
					<view class="userinfo d-flex align-center justify-space-between">
						<view class="d-flex align-center">
							
							<view class="avatar">
								<image :src="src" mode=""></image>
							</view>
							<view class="">
								<view class=" d-flex align-center">
									<text class="font-bold font-22 ml-3 mr-3 username">{{userinfo.user_name}}</text>
									<image class="erweima" :src="userinfo.toppic" mode=""></image>
									
								</view>
								<view class="d-flex align-center mt-2">
									<view class="tag ml-2 tag1  d-flex align-center">
										<image class="icon" src="../../static/agentImages/user-icon.png" mode=""></image>
										<text>{{userinfo.realname==1 ? '未实名' : '已实名'}}</text>
									</view>
									<view class="tag ml-2 tag2  d-flex align-center">
										<image class="icon" src="../../static/agentImages/user-ri-icon.png" mode=""></image>
										<text>{{userinfo.exam==1 ? '未审核' : '已审核'}}</text>
									</view>
									
								</view>
							</view>
							
						</view>
						<view>
							<uni-icons type="right" color="#fff" size="26"></uni-icons>
						</view>
					</view>
					<!-- <view class="agent-card mt-6"> 
						<view class="mb-2 d-flex align-center justify-space-between">
							<view class="vip d-flex align-center">
								<image src="../../static/homeImages/vip.png" mode=""></image>
								<text class="ml-2 font-bold font-20 white">{{userinfo.agent}}</text>
							</view>
							<view @click="handMore()" class="d-flex align-center button">
								<text class="">查看更多</text>
								<uni-icons type="right" color="#000" size="20"></uni-icons>
							</view>
						</view>
						<view>
							<text class="white">当月已激活 {{userinfo.order}} 个订单，您还需要激活 {{userinfo.shengyu}} 个订单可升级</text>
						</view>
					</view> -->
					<!-- 余额 -->
					<view class="mt-4 banlace-card d-flex align-center justify-space-between">
						<text class="font-bold font-18">余额</text>
						<text class="price">
							<text class="unit font-13">¥</text>
							<text class="font-18">{{user_money}}元</text>
						</text>
					</view>
					<view class="mt-4 banlace-card ">
						<view class="d-flex justify-space-between align-center" style="width: 100%;">
							<view class="d-flex flex-column">
								<text class="font-18 font-bold mb-2">0</text>
								<text>总结算收益</text>
							</view>
							<view>
								<uv-button color="#00B679" shape="circle" text="提现说明"></uv-button>
							</view>
						</view>
						<view class="d-flex justify-space-between mt-4 pt-2">
							<view class="tab_itemorder flex-column justify-center align-center">
								<view class="font-22 font-bold mb-2 text-center"><text>1</text></view>
								<view><text>今日结算收益</text></view>
							</view>
							<view class="tab_itemorder flex-column justify-center align-center">
								<view class="font-22 font-bold mb-2 text-center"><text>1</text></view>
								<view class="d-flex align-center">
									<text>冻结中</text>
									<uv-icon @click="openTip" name="question-circle-fill"></uv-icon>
								</view> 
							</view>
							<view class="tab_itemorder flex-column justify-center align-center">
								<view class="font-22 font-bold mb-2 text-center"><text>1</text></view>
								<view><text>今日结算订单</text></view>
							</view>
							<view class="tab_itemorder flex-column justify-center align-center">
								<view class="font-22 font-bold mb-2 text-center"><text>1</text></view>
								<view><text>累计结算订单</text></view>
							</view>
						</view>
					</view>
					<!-- tab -->
					<view class="mt-4 tab-card d-flex align-center justify-space-between u-flex-wrap">
						<view class="tab_itemorder flex-column justify-center align-center mb-4" @click="handTab(item.title,item.id)"
							v-for="(item , index) in tabs" :key="index+'tab'" >
							<image class="mb-2" :src="item.image" mode=""></image>
							<view><text>{{item.title}}</text></view>
						</view>
					</view>
					<!-- 广告 -->
					<view class="mt-4 advertisement" @click="handadvertisement">
						<image src="../../static/homeImages/guanggao.png" mode=""></image>
					</view>
					<view class="mt-4 data-box d-flex align-center justify-space-between">
						<view class="data-item data-item1 flex-column">
							<text class="font-16 font-bold4">系统问题</text>
							<view class="font-10 mt-1">查询系统问题</view>
						</view>
						<view class="data-item data-item2">
							<text class="font-16 font-bold4">如何分销</text>
							<view class="font-10 mt-1">分销问题解疑</view>
						</view>
						<view class="data-item data-item3">
							<text class="font-16 font-bold4">如何提单</text>
							<view class="font-10 mt-1">帮你提单提效</view>
						</view>
					</view>
					<!-- 设置 -->
					<view class="setting-card mt-4">
						<view @click="handSetting('系统教程')" class="set-item d-flex align-center mb-5 justify-space-between">
							<view class="set-title d-flex align-center">
								<image class="mr-2" src="../../static/homeImages/xitong-icon.png" mode=""></image>
								<text class=" font-18">系统教程</text>
							</view>
							<view class="">
								<uni-icons type="right" color="#000" size="24"></uni-icons>
							</view>
						</view>
						<view @click="handSettingShe()" class="set-item d-flex align-center mb-5 justify-space-between">
							<view class="set-title d-flex align-center">
								<image class="mr-2" src="../../static/homeImages/setting-icon.png" mode=""></image>
								<text class="font-18">设置</text>
							</view>
							<view class="">
								<uni-icons type="right" color="#000" size="24"></uni-icons>
							</view>
						</view>
						<view @click="handSetting('在线客服')" class="set-item d-flex align-center mb-5 justify-space-between">
							<view class="set-title d-flex align-center">
								<image class="mr-2" src="../../static/homeImages/kefu-icon.png" mode=""></image>
								<text class=" font-18">在线客服</text>
							</view>
							<view class="">
								<uni-icons type="right" color="#000" size="24"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			
		</view>
		<uv-popup ref="tippopup" :customStyle="customStyle">
					<view>
						<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
						不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
						转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
						但愿人长久，千里共婵娟。</text>
					</view>
				</uv-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				customStyle:{
					width:'600rpx',
					borderRadio:'10rpx',
					padding:'10rpx'
				},
				background: {
					backgroundColor: '#1678FF',
				},
				src: 'https://himg.bdimg.com/sys/portrait/item/public.1.2c2d3530.7zQeaCPjHsxhpbum6Bw5Fg.jpg',
				userinfo:{
					realname:1,
					exam:1,
					agent:'普通代理',
					order:12,
					shengyu:100,
					banlace:200
				},
				user_money:0.0,
				tabs:[
					{
							image: ('../../static/homeImages/tab1.png'),
							title: '产品分佣',
							id:1
						},
						{
							image: ('../../static/homeImages/tab2.png'),
							title: '代理分佣',
							id:2
						},
						{
							image: ('../../static/homeImages/tab3.png'),
							title: '提现管理',
							id:3
						},
						{
							image: ('../../static/homeImages/tab4.png'),
							title: '收入明细',
							id:4
						},
						{
							image: ('../../static/homeImages/tab5.png'),
							title: '我的分销',
							id:5
						},
						{
							image: ('../../static/homeImages/tab6.png'),
							title: '分销招募员',
							id:6
						},
						{
							image: ('../../static/homeImages/tab7.png'),
							title: '电商带货',
							id:7
						},
						{
							image: ('../../static/homeImages/tab8.png'),
							title: '我的小店',
							id:8
						},
				]
			}
		},
		onShow() {
			let nowApp = getApp();
			// console.log(nowApp)
			if (true === uni.$uv.getProperty(nowApp, 'globalData.reInit')) {
				getApp().globalData.reInit = false;
				console.log('重新执行init');
				this.init();
			}
		},
		onLoad(options) {
			options = options || {};
			this.serverHost = uni.$my.serverHost
			let aShopId = uni.getStorageSync('shop_id');
			if ((aShopId)) {
				uni.$my.shopId = aShopId;
			}
			this.init()
		},
		methods:{
			openTip(){
					this.$refs.tippopup.open('center');
			},
			handMore(){
				uni.showToast({
					title:'查看更多'
				})
			},
			handTab(title,id){
				console.log(title,44444444);
				if(id == 1 || id == 2 || id == 7){
					uni.showToast({
						title:'开发中'
					})
				}
				if(id == 5){
					this.dumpPage('/pages/agent/index',{},'launch')
				}
				if(id == 6){
					this.dumpPage('/pages/agent/index',{},'launch')
				}
				if(id == 4){
					this.dumpPage("/pages/cash/index")
				}
				if(id ==3){
					this.dumpPage("/pages/cash/cash")
				}
				if(id == 8){
					let te = "https://web.qqinfor.com/" + uni.$my.shopId;
					uni.navigateTo({
					    url: '/pages/webview/webview?url=' + encodeURIComponent(te)
					});
				}
				
			},
			handadvertisement(){
				uni.showToast({
					title:'广告'
				})
			},
			handSetting(item){
				uni.showToast({
					title:'开发中'
				})
			},
			handSettingShe(){
				this.dumpPage("/pages/shezhi/shezhi",{},'to');
			},
			
			init(){
				uni.$uv.http.get('/my/index').then(res => {
					// console.log(res,55555555);
					this.userinfo = res.data.user || {};
					this.user_money = res.data.cash_money || 0.0;
					this.userinfo.toppic = res.data.user.avatar || '../../static/homeImages/erweima.png';
					// if (res.code === 200) {
						
					// }
					// console.log(this.adpic)
				}).catch(e => {
					console.log(e)
				})
			},
			dumpPage(page, params, type) {
				uni.$my.dumpPage(page, params, type)
			},
		}
	}
</script>

<style scoped lang="scss">
	.navba-box{
		width: 100%;
		height: 420rpx;
		background-image: url('../../static/homeImages/user-bg.png');
		background-size: 100% 100%;
		.top{
			height:80rpx;
			// var(--status-bar-height)
		}
		.header-box{
			padding: 0 20rpx;
			padding-bottom: 160rpx;
			.userinfo{
				.avatar{
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.username{
					color: #fff;
				}
				.erweima{
					width: 50rpx;
					height: 50rpx;
				}
				.tag{
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					font-size: 24rpx;
					.icon{
						width: 30rpx;
						height: 30rpx;
						margin-right: 6rpx;
					}
				}
				.tag1{
					background: #DBE5FF;
					color: #1456FE;
				}
				.tag2{
					background: #FFEAE4;
					color: #FF600F;
				}
			}
			.agent-card{
				width: 100%;
				background:  linear-gradient( 90deg, #1678FF 0%, #7F43FF 100%);
				border-radius: 16rpx;
				padding: 10rpx 20rpx;
				.vip{
					image{
						width: 70rpx;
						height: 70rpx;
					}
				}
				.button{
					background: linear-gradient( 90deg, #FFCB7C 0%, #FFBB54 100%);
					border-radius: 32rpx;
					padding: 10rpx 20rpx;
				}
			}
			.banlace-card{
				width: 100%;
				background:  #fff;
				border-radius: 16rpx;
				padding: 20rpx;
				.price{
					color:#FF600F ;
				}
			}
			.tab-card{
				width: 100%;
				background:  #fff;
				border-radius: 16rpx;
				padding: 20rpx;
				
				.tab_itemorder {
					width: 25%;
					text-align: center;
				}
				image {
					width: 110rpx;
					height: 110rpx;
				}
			}
			.advertisement{
				width: 100%;
				height: 200rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.data-box{
				.data-item{
					width: 32%;
					height: 140rpx;
					padding: 20rpx;
				}
				.data-item1{
					background-image: url('../../static/homeImages/xitong.png');
					background-size: 100% 100%;
				}
				.data-item2{
					background-image: url('../../static/homeImages/fenxiao.png');
					background-size: 100% 100%;
				}
				.data-item3{
					background-image: url('../../static/homeImages/tidan.png');
					background-size: 100% 100%;
				}
			}
			.setting-card{
				width: 100%;
				background:  #fff;
				border-radius: 16rpx;
				padding: 20rpx;
				padding-bottom: 1rpx;
				.set-title{
					image{
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
	}
</style>